<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				border: 10px solid #666;
				padding:15px;
				background: #f199a2;
				color: #fff;
			}
			span{
				background: green;
			}
		</style>
	</head>
	<body>
		<input id="searchText" type="text">
		<input id="replaceText" type="text">
		<button id="searchBtn">查找</button>
		<button id="replaceBtn">替换</button>
		<br><br>
		<div id="content">
			随着自由贸易港建设进程的加快，海南在制度创新、
			服务业开放、产业创新等方面进行了重要的试验和探索。
			海口市政府服务中心设置“12345海口政府服务热线”，
			创造性地运用“12345+网格化”服务方式，将“放管服”改革的每一步都落在实处。
			海口复兴城以数字经济为发展重点，打造国际离岸创新创业示范基地。
			而博鳌乐城国际医疗旅游先行区则在加快药品、器械的进口审批速度，实现医疗药械进口审批“先行先试”
		</div>
		
		<script>
			let oSearch = document.getElementById('searchText');
			let oSbtn = document.getElementById('searchBtn');
			let oRtext = document.getElementById('replaceText');
			let oRbtn = document.getElementById('replaceBtn');
			let oContent = document.getElementById('content');
			let oldContent = oContent.innerHTML;
			
			oSbtn.onclick = function(){
				let arr = oldContent.split(oSearch.value);
				let newstr = arr.join('<span>'+oSearch.value+'</span>');
				oContent.innerHTML = newstr;
			}
			
			oRbtn.onclick = function(){
				let arr = oldContent.split(oSearch.value);
				let newstr = arr.join('<span>'+oRtext.value+'</span>');
				oContent.innerHTML = newstr;
				// 更新 oldContent
				let newstr2 = arr.join(oRtext.value);
				oldContent = newstr2;
			}
		</script>
	</body>
</html>
